<template>
    <div class="headerSearch">
        <van-nav-bar 
            left-text=""
            left-arrow 
            @click-left="onClickLeft" 
        />
        <van-search 
            v-model="value"
            placeholder="请输入搜索关键词" 
            shape="round" 
            disabled 
            @click="onClick"
        />
    </div>
    <!-- 搜索结果 -->
    <!-- <div class="m-list">
        <div class="m-box" v-for="(item, index) in searchList" :key="item.id" @click="onDetail(item.id)">
            <img :src="item.picture" alt="logo" />
            <div class="m-right">
                <p>￥{{ item.price }}</p>
                <p>{{ item.product }}</p>
            </div>
        </div>
    </div> -->

    
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useSearch } from '@/hooks/search'


const value = ref('');
const router = useRouter()
const { searchList } = useSearch()


console.log("跳转显示searchList", searchList.value);


const onClickLeft = () => history.back()
const onClick = () => { 
    router.push({ path: '/search/' })
}

</script>

<style lang="scss" scoped>
    .headerSearch{
        border-bottom: 1px solid rgb(229,229,230);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .van-search{
            width: 90%;
            margin-right: 2%;
        }
    }
    .m-list {
        width: 100%;
        display: flex;
        justify-content:space-evenly;
        flex-wrap: wrap;
        .m-box {
            width: 47%;
            background-color: rgb(247,248,250);
            margin: 6px 0;
            display: flex;
            flex-direction: column;
            border-radius: 20px;
            border: 1px solid #ddd;
            img {
                width: 95%;
                height: 95%;
                border-radius: 20px;
                margin: 6px auto;
                margin-bottom: 20px;
            }
            .m-right {
                color: #333;
                p:first-child {
                    font-size: 24px;
                    color: #ff1314;
                    font-weight: bold;
                }
            }
        }
    }
</style>